<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
import { ref, onMounted } from 'vue'
import { Api } from '@/assets/apis';
import type { ReadType } from '@/typings'
import { Toast } from 'vant';

const readeType = ref<ReadType>()
const route = useRoute()
const router = useRouter()
const navBbar = ref(true)
const dayNight = ref(true)
const font = ref(false)
const id = ref()
const uuid = ref()
const html = ref()
const size = ref(20)
const color = ref()
const fontColor = ref()
const barColor = ref()
id.value = route.params.id
uuid.value = route.query.uuid

const show = () => {
    navBbar.value = !navBbar.value
}

const nightModel = () => {
    dayNight.value = !dayNight.value
    color.value = '#2f2f2f'
    barColor.value = '#343434'
    fontColor.value = '#787878'
}

const dayModel = () => {
    dayNight.value = !dayNight.value
    color.value = '#f7f5f2'
    barColor.value = '#fff'
    fontColor.value = '#000'
}

const showFont = () => {
    font.value = !font.value
}


const min = () => {
    size.value--
}

const add = () => {
    size.value++
}

onMounted(async () => {
    Toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0,
    });
    let { data } = await Api.getContent(id.value, uuid.value)
    readeType.value = data.data
    html.value = readeType.value.content
    Toast.clear()
})
</script>

<template>
    <div class="body">
        <div class="fonts" :style="{ fontSize: size + 'rem', backgroundColor: color, color: fontColor }">
            <div v-html="html" class="html-text"></div>
        </div>
        <div class="touch" @click="show()"></div>
        <div class="top-bar" v-show="navBbar" :style="{ backgroundColor: barColor, color: fontColor }">
            <div class="back" @click="router.go(-1)">
                <van-icon name="arrow-left" />
            </div>
            <div class="item" @click="router.push('/')">
                <div class="icon">
                    <van-icon name="wap-home-o" />
                </div>
                <div class="text">
                    首页
                </div>
            </div>
        </div>
        <div class="bottom-bar" v-show="navBbar" :style="{ backgroundColor: barColor, color: fontColor }">
            <div class="bottom-item">
                <div class="bottom-icon"><van-icon name="bars" @click="router.push(`/book/${id}/directory`)
                " /></div>
                <div>目录</div>
            </div>
            <div class="bottom-item" @click="router.push('/bookshelf')">
                <div class="bottom-icon"><van-icon name="clock-o" /></div>
                <div>最近阅读</div>
            </div>
            <div class="bottom-item" @click="showFont">
                <div class="bottom-icon"><van-icon name="setting-o" /></div>
                <div>设置</div>
            </div>
            <div class="bottom-item" v-show="dayNight" @click="nightModel()">
                <div class="bottom-icon">
                    <img src="../../assets/images/yejianmoshi.png" alt="">
                </div>
                <div>夜间模式</div>
            </div>
            <div class="bottom-item" v-show="!dayNight" @click="dayModel()">
                <div class="bottom-icon">
                    <img src="../../assets/images/rijian.png" alt="">
                </div>
                <div>日间模式</div>
            </div>
            <div class="setting" v-show="font">
                <div class="text">字号</div>
                <div class="small" @click="min()">A-</div>
                <div class="big" @click="add()">A+</div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.body {
    min-height: 100vh;
    background-color: #f7f5f2;

    .fonts {
        .html-text {
            padding: 0 20rem;

            ::v-deep h1 {
                line-height: 30rem;
                font-weight: bold;
                padding-top: 60rem;
                margin-bottom: 20rem;
            }

            ::v-deep h2 {
                line-height: 30rem;
                font-weight: bold;
                padding-top: 60rem;
                margin-bottom: 20rem;
            }

            ::v-deep p {
                text-indent: 2em;
                padding-bottom: 36rem;
                line-height: 30rem;
            }

            ::v-deep img {
                width: 100%;
                margin-left: -35rem;
            }

        }
    }


    .touch {
        width: 350rem;
        height: 350rem;
        position: fixed;
        top: 50%;
        left: 12rem;
        transform: translateY(-50%);
        z-index: 99;
    }

    .top-bar {
        width: 375rem;
        height: 56rem;
        background-color: #fff;
        position: fixed;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: end;
        color: #666;

        .back {
            font-size: 20rem;
            flex: 1;
            padding-left: 10rem;
        }

        .item {
            width: 58rem;

            .icon {
                width: 32rem;
                height: 24rem;
                font-size: 20rem;
                text-align: center;
                margin: 0 auto;
            }

            .text {
                text-align: center;
            }
        }
    }

    .bottom-bar {
        position: fixed;
        bottom: 0;
        width: 375rem;
        height: 56rem;
        background-color: #fff;
        display: flex;
        align-items: center;

        .setting {
            width: 345rem;
            height: 45rem;
            background-color: #fff;
            padding: 0 15rem;
            position: fixed;
            bottom: 56rem;
            display: flex;
            justify-content: end;
            align-items: center;

            .text {
                flex: 1;
                font-size: 16rem;
                color: #666;
            }

            .small {
                width: 67rem;
                height: 28rem;
                border: 1rem solid #d2cdc8;
                border-radius: 16rem;
                text-align: center;
                line-height: 28rem;
                font-size: 16rem;
                color: #666;
            }

            .big {
                width: 67rem;
                height: 28rem;
                border: 1rem solid #d2cdc8;
                border-radius: 16rem;
                text-align: center;
                line-height: 28rem;
                font-size: 16rem;
                color: #666;
                margin-left: 10rem;
            }
        }

        .bottom-item {
            flex: 1;
        }

        .bottom-item {
            color: #666;
            text-align: center;

            img {
                width: 20rem;
                height: 20rem;
            }

            .bottom-icon {
                font-size: 20rem;
                height: 30rem;
            }
        }
    }
}
</style>